<template>
  <a-row class="card-nopd-out-container department-container">
    <a-col :span="3" class="tree-box process-chart">
      <makeListSide
        ref="makeListSideRef"
        @onSelect="onCardSelect"
        :listUrl="url.list"
        sideType="route"
      />
    </a-col>
    <a-col :span="21" class="table-box process-chart pt-20 pr-20">
      <div class="blue-line">{{$t('hangManage.roadVer')}}</div>
      <!--      <div class="list-operate2">-->
      <div class="divBackgroundImg2 my-15">
        <a-button
          type="primary"
          class="addBtn"
          :disabled="!selectMakeId"
          @click="operateRoute('add')"
        >
          <template #icon><PlusSquareOutlined /></template>{{ $t('common.addNew') }}
        </a-button>
      </div>
      <a-table
        :columns="columns"
        size="small"
        :dataSource="moProcRoadmapVersionVO"
        :pagination="false"
        :scroll="{ y: 'calc(100vh - 320px)' }"
      >
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.key === 'name'">
            <span class="code-link" @click="viewDetail(record)"
              >{{ record.name }}
            </span>
          </template>

          <template v-else-if="column.key === 'processName'">
            <span class="code-link" @click="viewProcessDetail(record)"
              >{{ record.processName }}
            </span>
          </template>

          <template v-else-if="column.key === 'status'">
            <a-tag :color="text == 1 ? 'processing' : 'warning'">{{
              text == 1 ? $t('other.use') : $t('other.unUse')
            }}</a-tag>
          </template>
          <template v-else-if="column.key === 'operate'">
            <span class="table-operate-container">
              <a-button
                type="link"
                class="primary-link"
                @click="operateRoute('edit', record)"
                >{{ $t('common.editor') }}</a-button
              >
              <span>
                <a-divider type="vertical" />
                <a-button
                  type="link"
                  class="primary-link"
                  @click="handleCopy(record.id)"
                  >{{ $t('other.copyTo') }}...</a-button
                >
              </span>
              <span v-if="record.status != 1">
                <a-divider type="vertical" />
                <a-button
                  type="link"
                  class="warning-link"
                  @click="handleDelete(record.id, true)"
                  >{{ $t('common.del') }}</a-button
                >
              </span>
            </span>
          </template>
        </template>
      </a-table>
    </a-col>
    <copyRouteModal ref="copyRouteModal" @ok="otherOperate" />
    <addRouteModal ref="addRouteModalRef" @ok="otherOperate" />
    <editRouteModal ref="editRouteModalRef" @ok="otherOperate" />
    <viewRouteModal ref="viewRouteModalRef" @operateRoute="operateRoute" />
    <!-- 模拟路线图 -->
    <pathModal v-model="modalInfo" ref="pathModal" @ok="otherOperate" />

    <viewProcessModal ref="viewProcessModalRef" @operateProc="handleOperate" />
    <addProcessModal ref="addProcessModalRef" @ok="otherOperate" />
    <editProcessModal ref="editProcessModalRef" @ok="otherOperate" />
  </a-row>
</template>

<script>
import { PlusSquareOutlined } from "@ant-design/icons-vue";
import { ListMixinPm } from "@/mixin/listMixinPm.js";
import { listInnerColumns } from "./newModules/routeChartConfig";
import copyRouteModal from "./newModules/copyRouteModal";
import makeListSide from "@/views/makeManage/makeProcess/newModules/makeListSide.vue";
import addRouteModal from "./modules/addRouteModal.vue";
import editRouteModal from "./modules/editRouteModal.vue";
import viewRouteModal from "./modules/viewRouteModal.vue";
// 模拟路线图
import pathModal from "@/components/pathModal/pathModal.vue";
import viewProcessModal from "@/views/makeManage/makeProcess/newModules/viewProcessModal.vue";
import addProcessModal from "@/views/makeManage/makeProcess/newModules/addProcessModal.vue";
import editProcessModal from "@/views/makeManage/makeProcess/newModules/editProcessModal.vue";

import { store } from "@/store";
import { mapState } from "vuex";
import { cloneDeep } from "lodash";
import { getLocalStorage } from "@/utils/index";
export default {
  name: "clientManage",
  mixins: [ListMixinPm],
  components: {
    copyRouteModal,
    makeListSide,
    addRouteModal,
    editRouteModal,
    viewRouteModal,
    PlusSquareOutlined,
    pathModal,
    viewProcessModal,
    addProcessModal,
    editProcessModal,
  },
  computed: {
    ...mapState({
      tabs: (state) => state.setting.tabs,
    }),
  },
  data() {
    return {
      url: {
        delete: "/api/mo/mo-proc-roadmap/delete",
        list: "/api/mo/mo-proc-roadmap/page",
      },
      columns: listInnerColumns,
      moProcRoadmapVersionVO: [],
      selectMakeId: null,
      modalInfo: {
        visible: true,
      },
      roadmapModel: getLocalStorage("configuration").roadmapModel,
      // roadmapModel: 0,
    };
  },
  methods: {
    loadData() {},
    viewDetail(record) {
      this.roadmapModel == 0
        ? this.$refs.pathModal.open({ ...record, type: "view" })
        : this.$refs.viewRouteModalRef.open({
            moId: record.moId,
            routeId: record.id,
          });
    },
    viewProcessDetail(record) {
      this.$refs.viewProcessModalRef.open({
        moId: record.moId,
        processId: record.processId,
      });
    },
    async handleOperate(type, record, isViews) {
      type == "add"
        ? await this.$refs.addProcessModalRef.open(
            isViews ? record : { moId: this.selectMakeId }
          )
        : await this.$refs.editProcessModalRef.open(
            isViews ? record : { moId: record.moId, processId: record.id }
          );
      this.$refs.viewProcessModalRef.onCancel();
    },
    async refreshTab(type) {
      let path =
        type == "add"
          ? "/makeManage/routeChart/add"
          : type == "edit"
          ? "/makeManage/routeChart/edit"
          : "/makeManage/routeChart/details";
      const tabList = cloneDeep(this.tabs);
      let changeTabs = tabList.filter((i) => ![path].includes(i.path));
      await store.commit("updateState", { tabs: changeTabs });
    },
    async operateRoute(type, record, isViews) {
      if (this.roadmapModel == 0) {
        type == "add"
          ? await this.$refs.pathModal.open(
              isViews ? record : { type, moId: this.selectMakeId }
            )
          : await this.$refs.pathModal.open(
              isViews ? record : { type, moId: record.moId, routeId: record.id }
            );
      } else {
        type == "add"
          ? await this.$refs.addRouteModalRef.open(
              isViews ? record : { moId: this.selectMakeId }
            )
          : await this.$refs.editRouteModalRef.open(
              isViews ? record : { moId: record.moId, routeId: record.id }
            );
        this.$refs.viewRouteModalRef && this.$refs.viewRouteModalRef.onCancle();
      }
    },
    otherOperate() {
      this.$refs.makeListSideRef.loadData(true);
    },
    handleCopy(id) {
      this.$refs.copyRouteModal.open(id, true);
    },
    onCardSelect(record) {
      this.moProcRoadmapVersionVO = record.moProcRoadmapVersionVO || [];
      this.selectMakeId = record.id;
    },
  },
};
</script>
